<template>
  <div class="chapter-wrapper">
    <div class="top">
      <div class="title">编辑章节</div>
    </div>
    <div class="middle d-flex-sb">
      <div class="middle-left d-flex">
        <el-image style="width: 100px; height: 100px" :src="classDetail.course_cover" :preview-src-list="srcList" />
        <div class="ml-15">{{ classDetail.course_name }}</div>
      </div>
      <div class="middle-right d-flex-sb" style="width: 500px">
        <Search @search="handleSearch" />
        <el-button type="primary" @click="addChapter">添加</el-button>
      </div>
    </div>
    <div class="bottom">
      <TableList :list="list" @delSuccess="handleDelSuccess" />
    </div>
    <Pagination class="pagination" :total="total" :cur-page="currentPage" @nextPage="handleNextPage" />
  </div>
</template>
<script>
import Search from '@/common/search'
import TableList from './table-list'
import { getChapterList } from '@/api/request/chapter'
import { getCourseDetail } from '@/api/request/class'
import Pagination from '@/common/pagination'
const ERR_OK = 200
export default {
  components: {
    Search,
    TableList,
    Pagination
  },
  data() {
    return {
      url:
        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      srcList: [],
      list: [],
      total: 0,
      currentPage: 1,
      classDetail: {},
      query: '',
      id: ''
    }
  },
  created() {
    if (this.$route.query.id) {
      this._getChapterList({ id: this.$route.query.id })
      this._getCourseDetail(this.$route.query.id)
      this.id = this.$route.query.id
    }
  },
  methods: {
    handleDelSuccess() {
      this.currentPage = 1
      this._getChapterList({ id: this.id, page: this.currentPage, keyword: this.query })
    },
    handleSearch(query) {
      this.query = query
      this.currentPage = 1
      this._getChapterList({ id: this.id, page: this.currentPage, keyword: this.query })
    },
    handleNextPage(page) {
      this.currentPage = page
    },
    addChapter() {
      this.$router.push({ path: '/chapterList/add-edit', query: { id: this.id }})
    },
    _getChapterList({ id, page, keyword }) {
      getChapterList({ id, page, keyword })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.list = res.list
            this.total = res.total
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getCourseDetail(id) {
      getCourseDetail(id)
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.classDetail = res.data
            this.srcList.push(res.data.course_cover)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/el-button.scss';
@import '@/styles/el-pagination.scss';
.chapter-wrapper {
  padding: 20px;
  box-sizing: border-box;
  background: #fff;
  height: 100%;
  flex: 1;
  .top {
    height: 60px;
    .title {
      line-height: 60px;
      color: rgba(68, 68, 68, 1);
      font-size: 18px;
      font-family: Roboto;
      font-weight: bold;
    }
  }
  .bottom{
    margin-top: 20px;
  }
}
.d-flex{
  display: flex;
  align-items: center;
}
.d-flex-sb{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ml-15{
  margin-left: 15px;
}
</style>
